AngularJS에서 select 태그의 option에 ngFor를 사용하는 경우 기본값을 사용하는 방법을 알아봅니다.
# select 태그 ngfor문에 기본값 사용하기
먼저 기본값을 사용하기 위해서는 ngFor가 적용된 option 태그에 [selected]를 사용해야합니다.
[selected]="조건값"조건이 true인 경우에는 기본값으로 선택되어 나타나게 됩니다.
! ngFor selected 예제보기
간단한 예제입니다. myDates라는 배열이 [ 1, 7, 30, 90, 365 ]인 경우 만약 value가 365인 경우에 기본값으로 설정하려면 어떻게 할까요? 아래와 같이 사용할 수 있습니다.
<select class="custom-select">
<option *ngFor="let date of myDates"
[value]="date"
[selected]="date == 365">{{ date }}</option>
</select>
이제 date가 365인 값이 기본 설정되어 나타납니다. 여기까지 간단하게 select 태그의 기본값 설정 방법을 알아봤습니다.
! noFor문의 index 값을 select에 사용하는 방법
만약 select 태그의 option에 데이터 값이 아닌 원하는
index값을 선택하여 selected를 적용하려면 어떻게 하는지 알아봅니다.
<select>
<option *ngFor="let date of myDates; let i = index"
[selected]="i === 0">{{ date }}</option>
</select>
이처럼 let i = index를 추가하여 i 값 변수의 index를 조건으로 사용하는 방법입니다.
@ index를 사용한 selected 설정이 안되는 경우
이 경우 [ngModel] 값이 설정되었는지 확인을 해야합니다. ngModel를 사용하는 경우 해당 변수값이 설정될 때 기본값을 입력해야만 합니다.